<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Farm Store Management Example</title>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' http: https:;">
    <link rel="stylesheet" href="css/style.css"> <!-- Link to the CSS file -->

</head>
<body>
    <h1>Farm Store Management</h1>
    <h2>Product Management</h2>
    
    <div class="section">
        <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.Y3mfJTKs2XLwGjekurK5CwHaEE?rs=1&pid=ImgDetMain" alt="Farm Store Image">
        <!--<p>Visit our <a href="https://dwz.cn/REEPK7uQ" target="_blank">online store</a> for more products.</p> -->
    </div>


    <section class="section">
        <h2>Add New Customer</h2>
        <form id="add-customer-form">
            <input type="text" id="customer-first-name" placeholder="First Name" required>
            <input type="text" id="customer-last-name" placeholder="Last Name" required>
            <select id="customer-gender" required>
                <option value="">Select Gender</option>
                <option value="Male">Male</option>
                <option value="Female">Female</option>
                <option value="Other">Other</option>
            </select>
            <button type="submit">Add Customer</button>
        </form>
    </section>
    


    <div class="section">

            <section class="section">
                <h2>Add New Product</h2>
                <form id="add-product-form">
                    <input type="text" id="product-name" placeholder="Product Name" required>
                    <input type="number" id="unit-price" placeholder="Unit Price" required>
                    <input type="number" id="tax-rate" value="5.5" disabled>
                    <input type="number" id="quantity" placeholder="Quantity" required>
                    <button type="submit">Add Product</button>
                </form>
            </section>

            <section class="section">
                <h2>Update Stock</h2>
                <form id="update-stock-form">
                    <input type="number" id="stock-product-id" placeholder="Product ID" required>
                    <input type="number" id="stock-quantity" placeholder="Quantity to Add" required>
                    <button type="submit">Update Stock</button>
                </form>
            </section>
            
            
        </form>
    </div>

    <div class="section">

        <h3>Product List</h3>
        <table id="product-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Unit Price</th>
                    <th>Tax Rate</th>                  
                    <th>Quantity</th>
                </tr>
            </thead>
            
            <tbody id="product-list">

                <!-- The list of products here will be retrieved from the database and displayed -->
            
            </tbody>
        </table>

    </div>
    
    <script src="script.js"></script>

</body>



</html>
